<template>
  <div id="zhaoshang">
    <div class="title_box mt-30">
      <p class="title">招商公告信息</p>
      <div class="line"></div>
    </div>

    <div class="mt-16">
      <a-table :columns="zhaoshanInfo" :pagination="zhaoshangpagination" :data-source="zhaoshangData"
        :rowKey="(record) => record.id">
        <a slot="action" slot-scope="text">{{ text }}</a>
        <span slot="action" slot-scope="text,record">
          <a @click="ZSDetails(record)" style="margin-right:32px">详情</a>
        </span>
      </a-table>
    </div>
    <InvTend :show="modalShow" :form="form" @close="handleClose" />
  </div>
</template>

<script>

import { getClientUseAnnnouncemeList } from '@/apis/com/announceme'
import InvTend from './InvTend.vue';
export default {
  components: { InvTend },
  data () {
    return {
      form: {},
      modalShow: false,
      zhaoshangpagination: {
        total: 0,
        pageSize: 10,
        current: 1,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) =>
          this.zhaoshangonSizeChange(current, pageSize),
        onChange: (page, pageSize) =>
          this.zhaoshangonPageChange(page, pageSize),
      },
      zhaoshangData: [],
      zhaoshanInfo: [
        {
          dataIndex: "index",
          title: "序号",
          width: 80,
          customRender: (text, record, index) => `${index + 1}`, // 显示每一行的序
        },
        // {
        //   dataIndex: "merchantsAbstract",
        //   title: "摘要",
        //   width: 180,
        //   ellipsis: true,
        // },
        // {
        //   dataIndex: "source",
        //   title: "来源",
        // },
        {
          dataIndex: "title",
          title: "标题",
          width: 240,
        },
        {
          dataIndex: "createTime",
          title: "创建时间",
          width: 140,
        },
        {
          title: "内容",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
          width: 140,
        },
      ]
    }
  },
  mounted () {
    this.getentMerchantsZSList();
  },
  methods: {
    handleClose () {
      this.modalShow = false
      this.form = {}
    },

    zhaoshangonPageChange (page, pageSize) {
      this.zhaoshangpagination.current = page;
      this.getentMerchantsZSList();
    },
    zhaoshangonSizeChange (current, pageSize) {
      this.zhaoshangpagination.pageSize = pageSize;
      this.getentMerchantsZSList();
    },
    // 获取招商合作列表
    getentMerchantsZSList () {
      let _params = {
        type: 1, //1招商，2招标
        pageSize: this.zhaoshangpagination.pageSize,
        status: 0,
        pageNum: this.zhaoshangpagination.current,
        companyId: this.$route.query.id,
      };
      getClientUseAnnnouncemeList(_params)
        .then((res) => {
          console.log("招商合作列表");
          console.log(res);
          if (res.code == 200) {
            this.zhaoshangData = res.rows;
            this.ZSform.total = res.total;
          }
        })
        .catch((error) => { });
    },

    ZSDetails (record) {
      this.form = record
      this.modalShow = true
    },
  }
}

</script>

<style lang="less" scoped>
.title_box {
  border-bottom: solid 1px #ebeef5;

  .title {
    font-size: 16px;
    line-height: 14px;
    letter-spacing: 0px;
    color: #303133;
  }

  .line {
    width: 20px;
    height: 4px;
    background-color: #188af1;
    margin-top: 8px;
  }
}
</style>